<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        
        #box3 {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
        
        #box2 {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            padding: 50px;
        }
        
        #box1 {
            width: 202px;
            height: 202px;
            border: 1px solid #000;
            padding: 50px;
        }
    </style>
</head>

<body>
    <div id="box">

    </div>
    <input type="text" id="nameField">
    <form id="myform" action="">
        <p>
            姓名
            <input type="text" name="nameField">
        </p>
        <p>
            年龄
            <input type="text" name="ageField">
        </p>
        <p>
            <input type="submit"></input>
        </p>
    </form>
    <div id="box1">
        <div id="box2">
            <div id="box3"></div>
        </div>
    </div>
    <script>
        var oBox = document.getElementById('box');
        // 鼠标监听
        oBox.onclick = function() {
            alert('按钮被点击了')
        };
        oBox.ondblclick = function() {
            alert('按钮被双击');
        };
        oBox.onmousedown = function() {
            alert('鼠标按下去')
        };
        // 键盘监听
        var oIn = document.getElementById('nameField')

        oIn.onkeydown = function() {
            console.log('我是onkeydown');
        };
        oIn.onkeyup = function() {
            console.log('我是onkeyup');
        };
        // 部分特殊按键不监听
        oIn.onkeypress = function() {
            console.log('我是onkeypress');
        };
        var myform = document.getElementById('myform');
        var nameField = myform.nameField;
        var ageField = myform.ageField;
        nameField.onchange = function() {
            console.log('你的名字已经被修改');
        };
        nameField.oninput = function() {
            console.log('正在输入');
        };
        nameField.onfocus = function() {
            console.log('聚焦');
        };
        nameField.onblur = function() {
            console.log('失焦');
        };
        nameField.onsubmit = function() {
            alert('提交监听');
        };
        var box1 = document.getElementById('box1');
        var box2 = document.getElementById('box2');
        var box3 = document.getElementById('box3');
        // 事件的传播实际上是先从外到内，然后再从内到外
        // 捕获阶段到冒泡阶段 
        // on只能监听冒泡阶段
        // addEventListener()事件监听   ---捕获阶段
        box1.onclick = function() {
            console.log('box1')
        }
        box2.onclick = function() {
            console.log('box2')
        }
        box3.onclick = function() {
            console.log('box3')
        };
        // true监听捕获阶段
        oBox.addEventListener('click', function() {
            // 这是事件处理函数
        }, true);
        // false监听冒泡阶段
        oBox.addEventListener('click', function() {
            // 这是事件处理函数
        }, false);
        // 最内层盒子的书写顺序影响监听顺序
        // dom1级比dom2级优秀二级会被覆盖一级不会覆盖
    </script>
</body>

</html>